<template>
    <el-container>
        <div class="headerWrapper">
            <el-header>
                <el-row type="flex" class="row-bg" justify="space-between">
                    <el-col :span="7">
                        <img class="logo" :src="logo">后台管理中心
                    </el-col>
                    <el-col :span="10"></el-col>
                    <el-col :span="7" class="t-r">
                        <el-dropdown>
                            <i class="el-icon-setting m-r-15"></i>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                            <span>{{nickname}}</span>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
        </div>
        <el-container>
            <el-aside width="210px">
                <router-link to="/user"><i class="el-icon-user-solid"></i>会员管理</router-link>

                <div v-if="cur.indexOf('type') != -1">
                    <router-link to="/type" class="router-link-exact-active"><i class="el-icon-s-grid"></i>分类管理
                    </router-link>
                </div>
                <div v-else>
                    <router-link to="/type"><i class="el-icon-s-grid"></i>分类管理</router-link>
                </div>

                <div v-if="cur.indexOf('video') != -1">
                    <router-link to="/video" class="router-link-exact-active"><i class="el-icon-film"></i>视频管理
                    </router-link>
                </div>
                <div v-else>
                    <router-link to="/video"><i class="el-icon-film"></i>视频管理</router-link>
                </div>

                <div v-if="cur.indexOf('voice') != -1">
                    <router-link to="/voice" class="router-link-exact-active"><i class="el-icon-phone-outline"></i>音频管理
                    </router-link>
                </div>
                <div v-else>
                    <router-link to="/voice"><i class="el-icon-phone-outline"></i>音频管理</router-link>
                </div>

                <div v-if="cur.indexOf('article') != -1">
                    <router-link to="/article" class="router-link-exact-active"><i class="el-icon-edit-outline"></i>文章管理
                    </router-link>
                </div>
                <div v-else>
                    <router-link to="/article"><i class="el-icon-edit-outline"></i>文章管理</router-link>
                </div>

                <div v-if="cur.indexOf('notice') != -1">
                    <router-link to="/notice" class="router-link-exact-active"><i class="el-icon-info"></i>通知公告
                    </router-link>
                </div>
                <div v-else>
                    <router-link to="/notice"><i class="el-icon-info"></i>通知公告</router-link>
                </div>

                <router-link to="/contribute"><i class="el-icon-star-on"></i>投稿中心</router-link>
                <router-link to="/suggest"><i class="el-icon-tickets"></i>意见反馈</router-link>
                <router-link to="/system"><i class="el-icon-s-tools"></i>系统设置</router-link>

                <div v-if="cur.indexOf('admin') != -1">
                    <router-link to="/admin" class="router-link-exact-active"><i class="el-icon-user"></i>管理员设置
                    </router-link>
                </div>
                <div v-else>
                    <router-link to="/admin"><i class="el-icon-user"></i>管理员设置</router-link>
                </div>
            </el-aside>

            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
        <el-footer>
            <el-col :span="24">Copyright © 2021 山西企华科技网络公司提供技术支持</el-col>
        </el-footer>
    </el-container>
</template>

<script>
    import {
        post
    } from '@/network/request'
    import logo from "../assets/image/logo.png"
    export default {
        data() {
            return {
                cur: '',
                nickname: '',
                logo
            }
        },
        mounted() {
            this.cur = this.$route.path.toLowerCase()
            this.nickname = sessionStorage.getItem('nickname')
        },
        updated() {
            this.cur = this.$route.path.toLowerCase()
        },
        methods: {
            logout() {
                post('/logout').then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        sessionStorage.removeItem('token')
                        this.$router.push('/')
                    }
                }).catch()
            }
        }
    }
</script>

<style>

</style>